<template>
  <div class="caibo-container">
    <Header />
    <div class="management-main">
      <div class="left-nav">
        <button 
          v-for="tab in tabs" 
          :key="tab.id"
          class="nav-item"
          :class="{ active: activeTab === tab.id }"
          @click="switchTab(tab.id)"
        >
          {{ tab.label }}
        </button>
      </div>
      
      <div class="content-area">
        <!-- 部门概况 -->
        <div v-show="activeTab === 'overview'" class="module-card">
          <h3>部门概况</h3>
          <p>采播部是东软之声广播台核心部门之一，主要负责校园广播工作。我们的主要职责包括：</p>
          <ul class="department-features">
            <li>负责日常校园广播节目的策划与制作</li>
            <li>编辑和录制广播节目内容</li>
            <li>维护和更新广播节目库</li>
            <li>培养新成员的播音技能</li>
          </ul>
          <div class="department-image">
            <img src="@/assets/采播.jpg" alt="采播部团队" />
          </div>
        </div>

        <!-- 现任部长 -->
        <div v-show="activeTab === 'minister'" class="module-card">
          <h3>现任部长</h3>
          <div class="minister-list">
            <div class="minister-item">
              <img src="@/assets/logo.jpg" alt="部长头像" class="avatar"/>
              <div class="minister-info">
                <h4>金鑫鑫</h4>
                <p><i class="iconfont icon-grade"></i> 2023级 计算机科学与技术</p>
                <p><i class="iconfont icon-phone"></i> 联系电话: 13800138000</p>
                <p><i class="iconfont icon-email"></i> 邮箱: jinxinxin23@dnui.edu.cn</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 下载专区 -->
        <div v-show="activeTab === 'download'" class="module-card">
          <h3>下载专区</h3>
          <div class="download-list">
            <div v-for="(file, index) in files" :key="index" class="download-item">
              <div class="file-info">
                <i class="iconfont icon-file"></i>
                <span>{{ file.name }}</span>
                <span class="file-size">{{ file.size }}</span>
              </div>
              <button class="download-btn" @click="downloadFile(file)">
                <i class="iconfont icon-download"></i> 下载
              </button>
            </div>
          </div>
        </div>

        <!-- 个人中心 -->
        <div v-show="activeTab === 'profile'" class="module-card">
          <h3>个人中心</h3>
          <form class="profile-form">
            <div class="form-group">
              <label>姓名</label>
              <input type="text" v-model="userInfo.name" />
            </div>
            <div class="form-group">
              <label>学号</label>
              <input type="text" v-model="userInfo.studentId" disabled />
            </div>
            <div class="form-group">
              <label>专业</label>
              <input type="text" v-model="userInfo.major" />
            </div>
            <div class="form-group">
              <label>联系电话</label>
              <input type="tel" v-model="userInfo.phone" />
            </div>
            <button type="button" class="save-btn" @click="saveProfile">保存信息</button>
          </form>
        </div>

        <!-- 我的排班 -->
        <div v-show="activeTab === 'schedule'" class="module-card">
          <h3>我的排班</h3>
          <div class="schedule-controls">
            <select v-model="selectedMonth" @change="fetchSchedule">
              <option v-for="month in months" :key="month" :value="month">{{ month }}月</option>
            </select>
            <button class="refresh-btn" @click="fetchSchedule">
              <i class="iconfont icon-refresh"></i> 刷新
            </button>
          </div>
          <table class="schedule-table">
            <thead>
              <tr>
                <th>日期</th>
                <th>时段</th>
                <th>节目</th>
                <th>状态</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in schedule" :key="index">
                <td>{{ item.date }}</td>
                <td>{{ item.time }}</td>
                <td>{{ item.program }}</td>
                <td :class="item.status">{{ item.status }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'

const authStore = useAuthStore()
const router = useRouter()

// 检查登录状态
onMounted(() => {
  if (!authStore.isLoggedIn) {
    router.push('/login')
  }

  // 从 localStorage 读取用户信息
  const userInfoData = localStorage.getItem('userInfo')
  if (userInfoData) {
    userInfo.value = JSON.parse(userInfoData)
  }
})

// 标签页管理
const tabs = [
  { id: 'overview', label: '部门概况' },
  { id: 'minister', label: '现任部长' },
  { id: 'download', label: '下载专区' },
  { id: 'profile', label: '个人中心' },
  { id: 'schedule', label: '我的排班' }
]

const activeTab = ref('overview')

const switchTab = (tabId) => {
  activeTab.value = tabId
}

// 部门概况数据
// 已经在模板中直接使用

// 现任部长数据
// 已经在模板中直接使用

// 下载专区数据
const files = ref([
  { name: '节目策划模板.docx', size: '1.2MB', url: '#' },
  { name: '采访问题清单.xlsx', size: '0.8MB', url: '#' },
  { name: '播音设备使用手册.pdf', size: '3.5MB', url: '#' },
  { name: '节目录制规范.pdf', size: '2.1MB', url: '#' }
])

const downloadFile = (file) => {
  console.log('下载文件:', file.name)
  // 实际项目中这里应该是文件下载逻辑
  // window.location.href = file.url
}

// 个人中心数据
const userInfo = ref({
  name: '',
  studentId: '',
  major: '',
  phone: ''
})

const saveProfile = () => {
  console.log('保存个人信息:', userInfo.value)
  // 将更新后的用户信息保存到 localStorage
  localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
  alert('个人信息已保存')
}

// 排班数据
const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
const selectedMonth = ref(new Date().getMonth() + 1)
const schedule = ref([
  { date: '2024-05-20', time: '17:00-18:00', program: '校园新闻', status: '已完成' },
  { date: '2024-05-22', time: '17:00-18:00', program: '音乐时光', status: '已安排' },
  { date: '2024-05-25', time: '12:00-12:30', program: '午间快讯', status: '待确认' }
])

const fetchSchedule = () => {
  console.log('获取排班数据，月份:', selectedMonth.value)
  // 实际项目中这里应该是API调用
}
</script>

<style scoped>
.caibo-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.management-main {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.left-nav {
  width: 220px;
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  display: block;
  padding: 12px 15px;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s;
  border: none;
  background: none;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
}

.nav-item:hover {
  background-color: #f0f7ff;
  color: #3498db;
}

.nav-item.active {
  background-color: #3498db;
  color: white;
  font-weight: 500;
}

.content-area {
  flex: 1;
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-card {
  margin-bottom: 25px;
}

.module-card h3 {
  color: #2c3e50;
  font-size: 1.5rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}

.department-features {
  margin: 15px 0;
  padding-left: 20px;
}

.department-features li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.department-image {
  margin-top: 20px;
}

.department-image img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 6px;
}

.minister-item {
  display: flex;
  gap: 20px;
  align-items: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f0f0f0;
}

.minister-info h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #2c3e50;
}

.minister-info p {
  margin-bottom: 8px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}

.download-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.download-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #f9f9f9;
  border-radius: 6px;
  transition: all 0.3s;
}

.download-item:hover {
  background-color: #f0f7ff;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-size {
  color: #777;
  font-size: 0.9rem;
}

.download-btn {
  padding: 6px 12px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.3s;
}

.download-btn:hover {
  background-color: #2980b9;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 500px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-weight: 500;
  color: #555;
}

.form-group input {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
}

.save-btn {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.save-btn:hover {
  background-color: #45a049;
}
</style>